<template>
  <div class="login container">
    <my-header></my-header>
    <section>
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="70px"
      >
        <el-form-item label="手机号" prop="usertel">
          <el-input v-model="loginForm.usertel"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div class="login-div">
        <el-button class="login-btn" @click="loginOk">登录</el-button>
      </div>
      <div class="login-span">
        <span @click="goPhoneLogin">短信登录</span>
        <span @click="goforgetPws">忘记密码</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../../components/common/Tabbar.vue";
import MyHeader from "./MyHeader.vue";
import qs from "qs";
export default {
  name: "Login",
  components: {
    Tabbar,
    MyHeader,
  },
  data() {
    //手机号验证规则
    var checkPhone = (rule, value, cb) => {
      const rulePhone = /^1[23456789]\d{9}$/;
      if (rulePhone.test(value)) return cb();
      cb(new Error("请输入合法的手机号"));
    };
    //密码验证规则
    var checkPws = (rule, value, cb) => {
      const rulePws = /^\w{6,15}$/;
      if (rulePws.test(value)) return cb();
      cb(new Error("密码在6-15位数之间,且包含字母、数字、下划线"));
    };
    return {
      loginForm: {
        usertel: "18685745895",
        password: "123456",
      },
      // 验证表单规则
      loginFormRules: {
        usertel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPws, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    loginOk() {
      //前端验证
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        // 后端验证;
        this.$http
          .post("/pwsLogin", qs.stringify(this.loginForm))
          .then(() => {
            this.$message.success("登录成功");
            this.$router.push("/home");
            // console.log(qs.stringify(this.loginForm));
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    goPhoneLogin() {
      this.$router.push("/login");
    },
    goforgetPws() {
      this.$router.push("/resetPws");
    },
    goRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style lang="less" scoped>
section {
  background-color: #f5f5f5;
  .el-form {
    margin: 20px 50px;
    font-size: 16px;
    .el-form-item {
      display: flex;
      width: 100%;
      .el-button {
        margin-top: 10px;
      }
    }
  }
}
.login-div {
  text-align: center;
}
.login-btn {
  width: 80%;
  font-size: 18px;
  background-color: rgb(20, 135, 118);
  color: #fff;
  height: 40px;
  border-radius: 20px;
}
.login-span {
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  font-size: 15px;
  color: #606266;
}
</style>